<template>
    <div>
        <el-dialog title="订单详情" :visible.sync="data.bSwitch" fullscreen width="680px">
            <el-descriptions :column="2">
                <el-descriptions-item label="订单号">{{ infoData.outTradeNo }}</el-descriptions-item>
                <el-descriptions-item label="套系名称">{{ infoData.name }}</el-descriptions-item>
                <el-descriptions-item label="归属地">
                    <dict-tag :options="dict.type.template_own_type" :value="infoData.ownType"/>
                </el-descriptions-item>
                <el-descriptions-item label="分类">
                    <dict-tag :options="dict.type.template_cat_type" :value="infoData.catType"/>
                </el-descriptions-item>
                <el-descriptions-item label="人群">
                    <dict-tag :options="dict.type.template_user_type" :value="infoData.catType"/>
                </el-descriptions-item>
                <el-descriptions-item label="价格">{{ infoData.price / 100 }} 元</el-descriptions-item>
                <el-descriptions-item label="优惠券">
                    <!-- 金额券 -->
                    <span v-if="infoData.type === 1">{{ infoData.subMoney }} 元</span>
                    <!-- 折扣券 -->
                    <span v-if="infoData.type === 2">{{ infoData.subMoney }} 折</span>
                </el-descriptions-item>
                <el-descriptions-item label="实际支付">
                    <span v-if="[1,2,3,4].includes(infoData.status)">{{ infoData.payPrice / 100 }} 元</span>
                    <span v-else>--</span>
                </el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag size="small" type="info" v-if="infoData.status === 0">待付款</el-tag>
                    <el-tag size="small" v-if="infoData.status === 1">已付款</el-tag>
                    <el-tag size="small" type="warning" v-if="infoData.status === 2">制作中</el-tag>
                    <el-tag size="small" type="success" v-if="infoData.status === 3">已完成</el-tag>
                    <el-tag size="small" type="danger" v-if="infoData.status === 4">制作失败</el-tag>
                    <el-tag size="small" type="danger" v-if="infoData.status === 5">已退款</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ parseTime(infoData.createDate) }}</el-descriptions-item>
                <el-descriptions-item label="付款时间">{{ infoData.payDate ? parseTime(infoData.payDate) : '--' }}</el-descriptions-item>
                <el-descriptions-item label="完成时间">{{ infoData.finishDate ? parseTime(infoData.finishDate) : '--' }}</el-descriptions-item>
                <el-descriptions-item label="正面照片" :span="2">
                    <div v-if="infoData.frontUrl" style="text-align: center;">
                        <el-image
                            style="width: 100px; height: 180px; display: block;"
                            :src="infoData.frontUrl+'?style=imageMogr2/thumbnail/1200x'"
                            :preview-src-list="[infoData.frontUrl+'?style=imageMogr2/thumbnail/1200x']"
                            fit="contain">
                        </el-image>
                        <el-link type="primary" @click="onDownLoad(infoData.frontUrl)">下载</el-link>
                    </div>
                    <span v-else>--</span>
                </el-descriptions-item>
                <el-descriptions-item label="生成照片" :span="2">
                    <span v-if="images && images.length">
                        <div v-for="(item, index) of images" :key="index" style="float: left; text-align: center; margin-right: 10px;">
                            <el-image
                                style="width: 100px; height: 180px; display: block;"
                                :src="item.url+'?style=imageMogr2/thumbnail/1200x'"
                                :preview-src-list="fileUrls"
                                fit="contain">
                            </el-image>
                            <el-link type="primary" @click="onDownLoad(item.url)">下载</el-link>
                        </div>
                    </span>
                    <span v-else>--</span>
                </el-descriptions-item>
				<el-descriptions-item label="生成视频" :span="2">
					<span v-if="videos && videos.length">
						<div v-for="(item, index) of videos" :key="index"
							style="float: left; text-align: center; margin-right: 10px;">
							<!-- <video src="item.url" style="width: 100px; height: 180px; display: block;"></video> -->
							<el-link type="primary" @click="onDownLoad(item.url)">下载</el-link>
						</div>
					</span>
					<span v-else>--</span>
				</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
import { getOrder } from '@/api/order'

export default {
    props: {
        data: {
            type: Object,
            default() {
                return {
                    id: null,
                    bSwitch: false
                }
            }
        }
    },
    dicts: ['template_cat_type', 'template_own_type', 'template_user_type'],
    data() {
        return {
            infoData: {
                name: null,
                status: null,
                deleted: null,
                ownType: null,
                catType: null,
                userType: null,
                albumNum: null,
                price: null,
                payPrice: null,
                payDate: null,
                finishDate: null,
                createDate: null,
                lastUpdate: null,
                creatorId: null,
                outTradeNo: null,
                frontUrl: null,
                lsideUrl: null,
                rsideUrl: null,
                remark: null,
                files: [],
                photo: {},
            }
        }
    },
    computed: {
        fileUrls() {
            const list = []
            this.infoData.files.map(item => {
                list.push(item.url+'?style=imageMogr2/thumbnail/1200x')
            })
            return list
        },
		images() {
			let list = []
			if (this.infoData.files && this.infoData.files.length) {
				list = this.infoData.files.filter(item => !item.ext.includes('mp4'))
			}
			return list
		},
		videos() {
			let list = []
			if (this.infoData.files && this.infoData.files.length) {
				list = this.infoData.files.filter(item => item.ext.includes('mp4'))
			}
			return list
		}
    },
    created() {
        this.data.id && this.getDetail()
    },
    methods: {
        onDownLoad(url) {
            window.open(url, '_blank')
        },
        // 获取详情
        getDetail() {
            getOrder(this.data.id).then(res => {
                const {
                    name,
                    status,
                    ownType,
                    catType,
                    userType,
                    price,
                    payPrice,
                    payDate,
                    finishDate,
                    createDate,
                    lastUpdate,
                    outTradeNo,
                    frontUrl,
                    rsideUrl,
                    lsideUrl,
                    remark,
                    files,
                    photo
                } = res.data
                this.$set(this.infoData, 'name', name)
                this.$set(this.infoData, 'status', status)
                this.$set(this.infoData, 'ownType', ownType)
                this.$set(this.infoData, 'catType', catType)
                this.$set(this.infoData, 'userType', userType)
                this.$set(this.infoData, 'price', price)
                this.$set(this.infoData, 'payPrice', payPrice)
                this.$set(this.infoData, 'payDate', payDate)
                this.$set(this.infoData, 'finishDate', finishDate)
                this.$set(this.infoData, 'createDate', createDate)
                this.$set(this.infoData, 'lastUpdate', lastUpdate)
                this.$set(this.infoData, 'outTradeNo', outTradeNo)
                this.$set(this.infoData, 'frontUrl', frontUrl)
                this.$set(this.infoData, 'rsideUrl', rsideUrl)
                this.$set(this.infoData, 'lsideUrl', lsideUrl)
                this.$set(this.infoData, 'remark', remark)
                this.$set(this.infoData, 'files', files)
                this.$set(this.infoData, 'photo', photo)
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.demo-ruleForm {
    width: 90%;
}

::v-deep .el-input-number .el-input__inner {
    text-align: left; /* 将文本对齐方式改为左对齐，这样数字就不会居中了 */
}
::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 180px;
    height: 100px;
    display: block;
}

::v-deep .el-upload--picture-card {
    line-height: 98px;
    height: 100px;
    width: 180px;
    background-color: transparent;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
    height: 100px;
    width: 180px;
}
</style>